<template>
	<div class="wscn-http404-container flex-center">
		<div class="wscn-http404 flex-center height-100">
			<div class="pic-404">
				<img class="pic-404__parent" src="../../assets/404_images/404.png" alt="404" />
				<img class="pic-404__child left" src="../../assets/404_images/404_cloud.png" alt="404" />
				<img class="pic-404__child mid" src="../../assets/404_images/404_cloud.png" alt="404" />
				<img class="pic-404__child right" src="../../assets/404_images/404_cloud.png" alt="404" />
			</div>
			<div class="bullshit">
				<div class="bullshit__oops color-fff">哎呀!页面找不到了哦、请检查地址是否正确</div>
				<div class="bullshit__info color-fff">
					请检查页面是否存在,或联系管理员
				</div>
				<div class="bullshit__return-home" @click="bankHome">返回首页</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const router = useRouter();
// 返回首页
const bankHome = () => {
	router.replace('/')
}
</script>

<style lang="scss" scoped>
	.wscn-http404-container {
		width: 100%;
		height: 100%;
		background: #003650;
	}

	.wscn-http404 {
		.pic-404 {
			position: relative;
			float: left;
			width: 37.5rem;
			overflow: hidden;

			&__parent {
				width: 100%;
			}

			&__child {
				position: absolute;

				&.left {
					width: 5rem;
					top: 1.0625rem;
					left: 13.75rem;
					opacity: 0;
					animation-name: cloudLeft;
					animation-duration: 2s;
					animation-timing-function: linear;
					animation-fill-mode: forwards;
					animation-delay: 1s;
				}

				&.mid {
					width: 2.875rem;
					top: 0.625rem;
					left: 26.25rem;
					opacity: 0;
					animation-name: cloudMid;
					animation-duration: 2s;
					animation-timing-function: linear;
					animation-fill-mode: forwards;
					animation-delay: 1.2s;
				}

				&.right {
					width: 3.875rem;
					top: 6.25rem;
					left: 31.25rem;
					opacity: 0;
					animation-name: cloudRight;
					animation-duration: 2s;
					animation-timing-function: linear;
					animation-fill-mode: forwards;
					animation-delay: 1s;
				}

				@keyframes cloudLeft {
					0% {
						top: 1.0625rem;
						left: 13.75rem;
						opacity: 0;
					}

					20% {
						top: 2.0625rem;
						left: 11.75rem;
						opacity: 1;
					}

					80% {
						top: 5.0625rem;
						left: 5.75rem;
						opacity: 1;
					}

					100% {
						top: 6.0625rem;
						left: 3.75rem;
						opacity: 0;
					}
				}

				@keyframes cloudMid {
					0% {
						top: 0.625rem;
						left: 26.25rem;
						opacity: 0;
					}

					20% {
						top: 2.5rem;
						left: 22.5rem;
						opacity: 1;
					}

					70% {
						top: 8.125rem;
						left: 11.25rem;
						opacity: 1;
					}

					100% {
						top: 10rem;
						left: 7.5rem;
						opacity: 0;
					}
				}

				@keyframes cloudRight {
					0% {
						top: 6.25rem;
						left: 31.25rem;
						opacity: 0;
					}

					20% {
						top: 7.5rem;
						left: 28.75rem;
						opacity: 1;
					}

					80% {
						top: 11.25rem;
						left: 21.25rem;
						opacity: 1;
					}

					100% {
						top: 12.5rem;
						left: 18.75rem;
						opacity: 0;
					}
				}
			}
		}

		.bullshit {
			position: relative;
			// width: 18.75rem;
			padding: 1.875rem 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&__oops {
				font-size: 2rem;
				font-weight: bold;
				line-height: 40px;
				opacity: 0;
				margin-bottom: 1.25rem;
				animation-name: slideUp;
				animation-duration: 0.5s;
				animation-fill-mode: forwards;
			}

			&__headline {
				font-size: 1.25rem;
				line-height: 1.5rem;
				font-weight: bold;
				opacity: 0;
				margin-bottom: 0.625rem;
				animation-name: slideUp;
				animation-duration: 0.5s;
				animation-delay: 0.1s;
				animation-fill-mode: forwards;
			}

			&__info {
				font-size: 0.8125rem;
				line-height: 1.3125rem;
				opacity: 0;
				margin-bottom: 1.875rem;
				animation-name: slideUp;
				animation-duration: 0.5s;
				animation-delay: 0.2s;
				animation-fill-mode: forwards;
			}

			&__return-home {
				display: block;
				width: 6.875rem;
				height: 2.25rem;
				background: #3081fb;
				border-radius: 6.25rem;
				text-align: center;
				color: #ffffff;
				opacity: 0;
				font-size: 0.75rem;
				line-height: 2.25rem;
				cursor: pointer;
				animation-name: slideUp;
				animation-duration: 0.5s;
				animation-delay: 0.3s;
				animation-fill-mode: forwards;
				text-decoration:none
			}

			@keyframes slideUp {
				0% {
					transform: translateY(3.75rem);
					opacity: 0;
				}

				100% {
					transform: translateY(0);
					opacity: 1;
				}
			}
		}
	}
</style>
